<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="80" formType="show" :isSubmitBtn="false" />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="详细信息" name="first">
        <div class="wrapper">
          <Anchor ref="anchor" :labelList="labels" labelWidth="90">
            <div id="row-01" class="box">
              <FormPanel ref="formPanel1" :list="formList1" :cols="3" :labelWidth="110" formType="show" :isSubmitBtn="false" />
            </div>
            <div id="row-02" class="box">
              <FormPanel ref="formPanel2" :list="formList2" :cols="3" :labelWidth="110" formType="show" :isSubmitBtn="false" />
            </div>
            <div id="row-03" class="box">
              <FormPanel ref="formPanel3" :list="formList3" :cols="3" :labelWidth="110" formType="show" :isSubmitBtn="false" />
            </div>
            <div id="row-04" class="box">
              <FormPanel ref="formPanel4" :list="formList4" :cols="3" :labelWidth="110" formType="show" :isSubmitBtn="false" />
            </div>
          </Anchor>
        </div>
      </el-tab-pane>
      <el-tab-pane label="车主备注" name="second">
        <FormPanel ref="formPanel5" :list="formList5" :cols="1" :labelWidth="0" formType="show" :isSubmitBtn="false" />
      </el-tab-pane>
    </el-tabs>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getOwnerInfo } from '@/api/repair/business/customer/additional';

export default {
  name: 'AddRecordPanel',
  mixins: [dictionary],
  props: {
    VIN: {
      type: String
    }
  },
  data() {
    this.selectedRows = [];
    return {
      labels: [
        { title: '基本信息', id: 'row-01' },
        { title: '附加信息', id: 'row-02' },
        { title: '联系人信息', id: 'row-03' },
        { title: '备注', id: 'row-04' }
      ],
      formList: this.createFormList(),
      formList1: this.createFormList1(),
      formList2: this.createFormList2(),
      formList3: this.createFormList3(),
      formList4: this.createFormList4(),
      formList5: this.createFormList5(),
      remark: {
        MEMO_INFO: ''
      },
      visible: false,
      activeName: 'first'
    };
  },
  created() {
    this.getOwnerInfo(this.VIN);
  },
  mounted() {
    // this.getXmcxzSelect();
    // this.getGongzSelect();
    // this.getWxtypeSelect();
    setTimeout(() => {
      this.$refs.anchor.REFRESH();
    }, 100);
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getOwnerInfo(val) {
      const res = await getOwnerInfo(val);
      // console.log(res)
      this.initData(res);
    },
    createFormList() {
      return [
        {
          type: 'SELECT',
          itemList: this.createDictList('1190'),
          label: '车主性质',
          fieldName: 'OWNER_PROPERTY'
        }
      ];
    },
    createFormList1() {
      return [
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'OWNER_NO'
        },
        {
          type: 'INPUT',
          label: '车主姓名',
          fieldName: 'OWNER_NAME'
        },
        {
          type: 'INPUT',
          label: '车主拼音',
          fieldName: 'OWNER_SPELL'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('1239'),
          label: '证件类型',
          fieldName: 'CT_CODE'
        },
        {
          type: 'INPUT',
          label: '证件号码',
          fieldName: 'CERTIFICATE_NO'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('9001'),
          label: '所在省份',
          fieldName: 'PROVINCE'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('9002'),
          label: '城市',
          fieldName: 'CITY'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('9003'),
          label: '区县',
          fieldName: 'DISTRICT'
        },
        {
          type: 'INPUT',
          label: '地址',
          fieldName: 'ADDRESS'
        },
        {
          type: 'INPUT',
          label: '邮编',
          fieldName: 'ZIP_CODE'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('3001'),
          label: '行业大类',
          fieldName: 'INDUSTRY_FIRST'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('3002'),
          label: '行业小类',
          fieldName: 'INDUSTRY_SECOND'
        },
        {
          type: 'INPUT',
          label: '税号',
          fieldName: 'TAX_NO'
        },
        {
          type: 'INPUT',
          label: '预收款',
          fieldName: 'PRE_PAY'
        },
        {
          type: 'INPUT',
          label: '欠款金额',
          fieldName: 'ARREARAGE_AMOUNT'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('1378'),
          label: '客户收款类别',
          fieldName: 'CUS_RECEIVE_SORT'
        },
        {
          type: 'INPUT',
          label: 'CRM-手机号码',
          fieldName: 'CRM_PHONE'
        },
        {
          type: 'INPUT',
          label: 'BPID',
          fieldName: 'BPID'
        }
      ];
    },
    createFormList2() {
      return [
        {
          type: 'INPUT',
          label: '姓名',
          fieldName: 'DECISION_MARKER_NAME'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('1006'),
          label: '性别',
          fieldName: 'DECISION_MARKER_GENDER'
        },
        {
          type: 'DATE',
          label: '生日',
          fieldName: 'DECISION_MARKER_BIRTHDAY'
        },
        {
          type: 'INPUT',
          label: '手机',
          fieldName: 'DECISION_MARKER_MOBILE'
        },
        {
          type: 'INPUT',
          label: '电话',
          fieldName: 'DECISION_MARKER_PHONE'
        },
        {
          type: 'INPUT',
          label: 'E_Mail',
          fieldName: 'DECISION_MARKER_E_MAIL'
        },
        {
          type: 'INPUT',
          label: '地址',
          fieldName: 'DECISION_MARKER_ADDRESS'
        },
        {
          type: 'INPUT',
          label: '爱好',
          fieldName: 'HOBBY'
        }
      ];
    },
    createFormList3() {
      return [
        {
          type: 'INPUT',
          label: '姓名',
          fieldName: 'CONTACTOR_NAME'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('1006'),
          label: '性别',
          fieldName: 'CONTACTOR_GENDER'
        },
        {
          type: 'DATE',
          label: '电话',
          fieldName: 'CONTACTOR_PHONE'
        },
        {
          type: 'INPUT',
          label: 'E-Mail',
          fieldName: 'CONTACTOR_EMAIL'
        },
        {
          type: 'INPUT',
          label: '传真',
          fieldName: 'CONTACTOR_FAX'
        },
        {
          type: 'INPUT',
          label: '手机',
          fieldName: 'CONTACTOR_MOBILE'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('9001'),
          label: '所在省份',
          fieldName: 'CONTACTOR_PROVINCE'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('9002'),
          label: '城市',
          fieldName: 'CONTACTOR_CITY'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('9003'),
          label: '区县',
          fieldName: 'CONTACTOR_DISTRICT'
        },
        {
          type: 'INPUT',
          label: '地址',
          fieldName: 'CONTACTOR_ADDRESS'
        },
        {
          type: 'INPUT',
          label: '邮编',
          fieldName: 'CONTACTOR_ZIP_CODE'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('1231'),
          label: '喜欢的联络方式',
          fieldName: 'CONTACTOR_HOBBY_CONTACT'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('1111'),
          label: '职业',
          fieldName: 'CONTACTOR_VOCATION_TYPE'
        },
        {
          type: 'SELECT',
          itemList: this.createDictList('1110'),
          label: '职称',
          fieldName: 'CONTACTOR_POSITION'
        }
      ];
    },
    createFormList4() {
      return [
        {
          type: 'TEXT_AREA',
          rows: 1,
          label: '备注',
          fieldName: 'REMARK'
        }
      ];
    },
    createFormList5() {
      return [
        {
          type: 'TEXT_AREA',
          rows: 18,
          label: '',
          fieldName: 'MEMO_INFO'
        }
      ];
    },
    initData(data) {
      this.formList.forEach(x => {
        x.initialValue = data[x.fieldName];
      });
      this.formList1.forEach(x => {
        x.initialValue = data[x.fieldName];
      });
      this.formList2.forEach(x => {
        x.initialValue = data[x.fieldName];
      });
      this.formList3.forEach(x => {
        x.initialValue = data[x.fieldName];
      });
      this.formList4.forEach(x => {
        x.initialValue = data[x.fieldName];
      });
      this.formList5.forEach(x => {
        x.initialValue = data[x.fieldName];
      });
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    // async getXmcxzSelect() {
    //   const res = await getXmcxzSelect();
    //   this.topFilterList[0].itemList = res.map(x => ({ value: x.MODEL_LABOUR_CODE, text: x.MODEL_LABOUR_NAME }));
    // },
    // async getGongzSelect() {
    //   const res = await getGongzSelect();
    //   this.topFilterList[12].itemList = res.map(x => ({ value: x.WORKER_TYPE_CODE, text: x.WORKER_TYPE_NAME }));
    // },
    // async getWxtypeSelect() {
    //   const res = await getWxtypeSelect();
    //   this.columns[4].filterItems = this.columns[4].editItems = res.map(x => ({ value: x.REPAIR_TYPE_CODE, text: x.REPAIR_TYPE_NAME }));
    // },
    // async getWxpjList(row) {
    //   const res = await getWxpjList(row, { offset: 0, limit: 100 });
    //   this.list = res.rows;
    // },
    addProdHandle() {
      this.visible = true;
    },
    closeDrawer(list) {
      this.$emit('close', false, list);
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  height: calc(100vh - 238px);
}
.box {
  border: 1px solid #ccc;
  padding-top: 15px;
  padding-right: 15px;
  border-radius: @borderRadius;
  margin-bottom: 20px;
  box-shadow: @boxShadow;
}
</style>
